<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性盒模型布局</title>
	<style type="text/css">
		
		ul{
			margin:0;
			padding:0;
			list-style:none;
			width:500px;
			border:5px solid #000;
			background-color:gold;
			margin:50px auto 0;
			
			display:flex;

			/* 
				row  默认子元素水平靠左排列
				row-reverse 子元素靠右倒序排列
				column 竖排
				column-reverse 倒序竖排

			*/

			flex-direction:row;
			/*   
				nowrap:默认值，子元素宽度超过父级宽度时不换行;
				wrap:子元素宽度超过父级宽度时换行;
				wrap-reverse:子元素宽度超过父级宽度时换行且倒序排列;

			 */
			flex-wrap:wrap-reverse;






		}

		ul li{
			width:200px;
			height:50px;
			margin:10px;
			line-height:50px;
			text-align:center;
			color:#fff;
			background-color:green;
		}



	</style>

</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</body>
</html>